<template>
    <el-card>
      <template #header>
        {{route.query.title}}统计数据
        <el-button size="small" type="primary"
            @click="goBack">返回
        </el-button>
    </template>
      <div class="block">
        <div style="display: inline-block; margin-right: 10px;">
          <span class="demonstration">请选择时间</span>
        </div>
        <el-date-picker v-model="datetimeRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
          end-placeholder="结束时间" @change="getFengJiaData" />
      </div>
      <el-table v-loading="loading" :data="fengJiaDataList" stripe style="width: 100%">
        <el-table-column prop="value" label="批次吨耗量" />
        <el-table-column prop="period" label="批次时长" />
        <el-table-column prop="update_time" label="时间" />
      </el-table>
    </el-card>
  </template>
  <script setup>
  import { fengJiaData } from '../api/index';
  import { ref, reactive } from 'vue';
  import { routeLocationKey, useRoute, useRouter } from 'vue-router'; 
  const route = useRoute();
  const router = useRouter();
  const fengJiaDataList = ref([]);
  const datetimeRange = ref([0, 0]);
  const formSearch = reactive({
    number: route.query.number,
    cool: route.query.cool,
    electric: route.query.electric,
    duration: route.query.duration
  });
  const loading = ref(true);
  
  const getFengJiaData = async () => {
    loading.value = true;
    formSearch.start = Date.parse(datetimeRange.value[0]) / 1000;
    formSearch.end = Date.parse(datetimeRange.value[1]) / 1000;
    try {
      const res = await fengJiaData(formSearch);
      if (res.status === 2000) {
        fengJiaDataList.value = res.data;
      } else {
        ElMessage.error(res.message);
      }
    } catch (error) {
  
    } finally {
      loading.value = false
    }
  };
  getFengJiaData();
  // 返回前一个路由
  const goBack = () => {
    router.back();
  };
  </script>
  <style scoped>
  .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  .loading-spinner {
    animation: rotate 1s infinite linear;
  }
  
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  </style>
  